<template>
	<!--pages/setting/setting.wxml-->
	<view class="container">
		<view class="option-box" @click="toYouKu">
			<view class="option-title">新手引导</view>
			<view class="option-arrow">
				<image class="my-bg" src="/static/images/arrow.png"></image>
			</view>
		</view>
		<view class="option-box" @click="toPravicy">
			<view class="option-title">隐私政策</view>
			<view class="option-arrow">
				<image class="my-bg" src="/static/images/arrow.png"></image>
			</view>
		</view>
		<view class="option-box" v-if="false">
			<view class="option-title">我的设备</view>
			<view class="option-arrow">
				<image class="my-bg" src="/static/images/arrow.png"></image>
			</view>
		</view>
	  <view class="option-box" style="margin-top:14rpx;" v-if="false">
			<view class="option-title">当前版本</view>
			<view class="option-title">V1.0.5</view>
		</view>
	  <view class="option-box" v-if="false">
			<view class="option-title">微信公众号</view>
			<view class="option-title">姐钥</view>
		</view>
	  <view class="option-box" v-if="false">
			<view class="option-title">商务合作</view>
			<view class="option-title">18500860320</view>
		</view>
	  <view class="logout-box" v-if="isLogin">
	    <view class="jkey-btn-confirm logout-btn" @click="openMask">退出登录</view>
	  </view>
	  <uni-popup ref="popup" type="bottom"  :is-mask-click="false" @maskClick="closeMask">
	  <view class="content-box">
	    <view>是否确认退出？</view>
	    <view>退出后将断开设备连接</view>
	    <view class="logout-btn-box">
	      <view class="mask-cancel-btn f-center" style="color:#A6A6A6;background-color: #E5E5E5;" @click="logout">
	        确认
	      </view>
	      <view class="mask-confirm-btn f-center" @click="closeMask">
	        取消
	      </view>
	    </view>
	  </view>
	</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPanelMask:false,
				    isConfirmBtnActive:false,
				    show:false
			};
		},
		onShow() {
			this.isLogin = uni.getStorageSync('isLogin')
		  },
		methods:{
			setData(obj){
				for(let i of Object.keys(obj)){
					this[i] = obj[i]
				}
			},
			openPanelMask(e){
			    this.$refs.popup.open()
			  },
			  closePanelMask(value){
			    if(value === 'closePanel'){
			      this.$refs.popup.close()
			    }
			  },
			  handleTouchStart(key){
			    this.setData({
			      [key]:true
			    })
			
			  },
			  handleTouchEnd(key){
			    this.setData({
			      [key]:false
			    })
			    if(key.indexOf('Cancel') !== -1){
			      this.closePanelMask('closePanel')
			    } else if(key.indexOf('Confirm') !== -1){
			      uni.clearStorageSync()
			      uni.navigateBack()
			    }
			  },
			  toPravicy(){
			    getApp().globalData.webViewUrl = 'https://www.machineeye.cn/hongfei-page/privacy-page/#/'
			        uni.navigateTo({
			          url: '/pages/web-page/web-page',
			        })
			  },
			  toYouKu(){
			    getApp().globalData.webViewUrl = 'https://www.machineeye.cn/hongfei-page/xinshouyindao-page/'
			        uni.navigateTo({
			          url: '/pages/web-page/web-page',
			        })
			  },
			  closeMask(){
			    this.$refs.popup.close()
			  },
			  logout(){
			    uni.clearStorageSync()
			    uni.closeBluetoothAdapter({})
			    this.$refs.popup.close()
			    uni.navigateBack({
			      delta:2
			    })
			  },
			  openMask(){
				  console.log('打开遮罩')
			    this.$refs.popup.open()
			  }
		}
	}
</script>

<style lang="less">
/* pages/setting/setting.wxss */
.container{
  background-color: #f7f7f7;
  width: 100vw;
  height: 100vh;
  font-family: SourceHanSansCN-Regular;
}
/* 遮罩层样式 */
.mask-action-panel{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.4);
  z-index: 999;
}
.action-panel{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: 40rpx 40rpx 0 0;
  background-color: #E9E8EE;
  padding: 48rpx 36rpx;
}
.panel-msg{
  width: 100%;
  font-size: 38rpx;
  color: #666;
  text-align: center;
  margin-bottom: 32rpx;
}
.panel-option{
  width: 100%;
  position: relative;
  height: 184rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-option-confirm{
  width: 344rpx;
  height: 184rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.option-button-text{
  z-index: 999;
  font-size: 36rpx;
  color: #999;
}
/**/
.option-box{
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx 28rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.option-title{
  font-size: 32rpx;
  color: #666;
}
.option-arrow{
  width: 20rpx;
  height: 28rpx;
  position: relative;
}
.my-bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.logout-box{
  position: absolute;
  width: 376rpx;
  height: 156rpx;
  position: absolute;
  left: calc((100vw - 376rpx)/2);
  bottom: 122rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logout-text{
  z-index: 200;
  font-size: 36rpx;
  color: #999;
}
.logout-btn{
  width: 256rpx;
  height: 80rpx;
}
.content-box{
  width: 100vw;
  height: 400rpx;
  font-size: 32rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}
.content-box .logout-btn-box{
  margin-top: 68rpx;
  box-sizing: border-box;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  padding: 0 148rpx;
  text-align: center;
}
.logout-btn-box >view{
  width: 180rpx;
  height: 80rpx;
}
.content-box >view:first-child{
  padding-top: 86rpx;
}
</style>
